<template>
  <div id="magazine">
    <head-view></head-view>
    <div class="container">
      <div class="top">
        <div class="new_magazine">
          <span class="magazine-title">最新杂志</span>
          <hr
            style="height: 1px; border: none; border-top: 1px solid #987cb9"
          />
          <ul class="new_li">
            <li><span>纽约时报第321期</span><span>2020/12/5</span></li>
            <li><span>纽约时报第320期</span><span>2020/12/5</span></li>
            <li><span>纽约时报第319期</span><span>2020/12/5</span></li>
            <li><span>纽约时报第318期</span><span>2020/12/5</span></li>
            <li><span>纽约时报第317期</span><span>2020/12/5</span></li>
            <li><span>纽约时报第316期</span><span>2020/12/5</span></li>
            <li><span>纽约时报第315期</span><span>2020/12/5</span></li>
          </ul>
        </div>
        <div class="right1">
          <div class="clock-in"></div>
          <div class="vocabulary-book"></div>
        </div>
      </div>
      <div class="all_magazine">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="时尚" name="first">
            <div class="fashion">
              <div class="left">
                <div class="left_img1 magazine_img"></div>
                <div class="magazine_text">
                  <span>杂志第9期</span><span>杂志第8期</span><span>杂志第7期</span>
                </div>
              </div>
              <div class="center">
                <div class="left_img1 magazine_img"></div>
                <div class="magazine_text">
                  <span>杂志第9期</span><span>杂志第8期</span><span>杂志第7期</span>
                </div>
              </div>
              <div class="right">
                <div class="left_img1 magazine_img"></div>
                <div class="magazine_text">
                  <span>杂志第9期</span><span>杂志第8期</span><span>杂志第7期</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="生活" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="健身" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="新闻" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "magazine",
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.fashion {
  width: 82vw;
  height: 42vh;
  display: flex;
  justify-content: space-between;
}
.left,.center,.right {
  width: 24vw;
  height: 100%;
  margin-top: 1vh;
  margin-left: 1vw;
  margin-right: 1vw;
  display: flex;
  justify-content: flex-start;
}
.magazine_img {
  width: 65%;
  height: 80%
}
.magazine_text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.magazine_text span {
  margin-top: 2vh;
  margin-left: 1vw;
  font-size: 22px;
}
.container {
  width: 84vw;
  height: 90vh;
  margin: 0 auto;
  font-family: "Times New Roman", Times, serif;
  background-color: rgb(148, 155, 155);
}
.top {
  height: 32vh;
  display: flex;
}
.new_magazine {
  margin-left: 1vw;
  width: 55vw;
  height: 30vh;
  border-radius: 5px;
  background: azure;
  margin-top: 2vh;
}
.all_magazine {
  margin-top: 4vh;
  margin-left: 1vw;
  width: 82vw;
  height: 50vh;
  border-radius: 5px;
  background: azure;
}
.magazine-title {
  font-size: 27px;
}
.new_li {
  margin-left: 1vw;
  margin-top: 1vh;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.new_li li {
  display: flex;
  justify-content: space-between;
}
.new_li li span:nth-of-type(2) {
  margin-right: 5vw;
}
.left_img1 {
  background: url("../../assets/img/back1.png");
  background-size: cover;  
}
.right1 {
  margin-left: 1vw;
  width: 25vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../assets/img/back3.png");
  background-size: 100% 100%;
  border-radius: 10px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5;
  -o-transition: all 0.5s;
  transition: all 1s;
  opacity: 70%;
}
.right1:hover {
  opacity: 100%;
}
</style>